<style>
.layout-breadcrumb {
    height: 3%;
    background: #f7f7f7;
    text-align: left;
    padding: 3px 0 0 10px;
}
</style>

<template>
    <div class="layout-breadcrumb">
        <Breadcrumb>
            <Breadcrumb-item href="/home">
                <Icon type="ios-home-outline"></Icon> 首页
            </Breadcrumb-item>
            <Breadcrumb-item :href="item.RouterUrl" v-for="item in BreadcrumbItem" :key="item.RouterUrl">
                <Icon :type="item.RouterIcon"></Icon> {{item.RouterName}}
            </Breadcrumb-item>
        </Breadcrumb>
    </div>
</template>
<script>
export default {
    data() {
        return {
            BreadcrumbItem: []
        }
    },
    methods: {
        getBreadcrumb() {
            this.BreadcrumbItem = this.$store.state.BreadcrumbItem;
        }
    },
    created: function () {
        this.getBreadcrumb();
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        "$route": "getBreadcrumb"
    }
}
</script>